<template>
	<view v-if="list" class="content poRel">
		<view class="wid100 poRel" style="height: 700rpx;">
			<swiper class="wh100" circular :autoplay='true' @change="changeswiper">
				<!-- <swiper-item v-for="(item,index) in list" :key="index">
					<image :src="url+item" class="wh100"></image>
				</swiper-item> -->
				<swiper-item v-for="(item,index) in list.life_img" :key="index" @click.stop="imageClick(index)">
					<image :src="item" class="wh100" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="poAbs dis disAl disJuC foSi20 biaoji" :style="'color: '+theme.main_color+';'">{{currentswiper+1}} / {{list.life_img.length}}</view>
		</view>
		<view class="wid90 mar borRad30 bacFFF poRel" style="margin-top: -45rpx;z-index: 10;">
			<view class="wid100 dis disAl" style="height: 71rpx;border-bottom: 1px solid #E5E5E5;">
				<view class="wid90 mar dis disAl disJuB foSi22" style="color: #8B8B8B;">
					<view class="dis">
						<!-- <image src="../../static/yiqianyue.png" style="width: 24rpx;height: 26rpx;margin-right: 6rpx;"></image> -->
						<uni-icons custom-prefix="iconfont" size="28rpx" :color="theme.main_color"
							type="icon-quanjudengjiguanli" style="margin-right: 6rpx;"></uni-icons>
						<view>签约商家</view>
					</view>
					<view class="dis mar-left10">
						<!-- <image src="../../static/jiangkangdangan.png" style="width: 24rpx;height: 26rpx;margin-right: 6rpx;"></image> -->
						<uni-icons custom-prefix="iconfont" size="28rpx" :color="theme.main_color"
							type="icon-shijianguanli" style="margin-right: 6rpx;"></uni-icons>
						<view>健康档案</view>
					</view>
					<view class="dis mar-left10">
						<!-- <image src="../../static/zizhi.png" style="width: 24rpx;height: 26rpx;margin-right: 6rpx;"></image> -->
						<uni-icons custom-prefix="iconfont" size="28rpx" :color="theme.main_color"
							type="icon-zizhizhengshu" style="margin-right: 6rpx;"></uni-icons>
						<view>资质证书</view>
					</view>
					<view class="dis mar-left10">
						<!-- <image src="../../static/baotui.png" style="width: 24rpx;height: 26rpx;margin-right: 6rpx;"></image> -->
						<uni-icons custom-prefix="iconfont" size="28rpx" :color="theme.main_color"
							type="icon-tui2" style="margin-right: 6rpx;"></uni-icons>
						<view>爽约包退</view>
					</view>
				</view>
			</view>
			<view class="wid90 mar">
				<view class="dis disAl disJuB mar-top20">
					<view class="dis disAl">
						<view class="fowe600 foSi35">{{list.name}}</view>
						<view class="dis disAl tim1 coFFF mar-left20" :style="'background-color: '+theme.main_color+';'"
							@click="tiaozhuan('/pages/technician/attestation?id='+list.id)">
							<image src="../../static/shenfen.png" style="width: 18rpx;height: 15rpx;"></image>
							<view class="foSi15" style="margin: 0 10rpx;">实名认证</view>
							<uni-icons type="right" size="15rpx" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="dis disAl" @click="shouchang()">
						<uni-icons v-if="list.collect == 2" type="star-filled" size="30rpx" :color="theme.main_color"></uni-icons>
						<uni-icons v-if="list.collect == 1" type="star" size="30rpx" color="#737373"></uni-icons>
						<!-- <view class="foSi20" style="color: #737373;line-height: 30rpx;margin-left: 4rpx;">收藏</view> -->
					</view>
				</view>
				<view class="mar-top20 foSi22" :style="'color: '+theme.main_color+';'">自我介绍：</view>
				<view class="mar-top10 webkitLineClamp foSi25 fowe600">{{list.brief}}</view>
				<view class="mar-top20 foSi22" :style="'color: '+theme.main_color+';'">技能证书：</view>
				<view class="mar-top10 webkitLineClamp foSi25 fowe600">《按摩师高级》</view>
				<view class="borRad10 dis disAl mar-top30" style="height: 92rpx;" :style="'background-color: '+theme.main_color+'21;'">
					<view class="wid90 mar dis disAl disJuB">
						<view class="dis disAl">
							<uni-icons type="star-filled" size="30rpx" :color="theme.main_color"></uni-icons>
							<view class="foSi25 fowe600 mar-left10" :style="'color: '+theme.main_color+';'" style="margin-right: 15rpx;">{{list.star}}</view>
							<view style="width: 1rpx;height: 22rpx;background: #BFBFBF;"></view>
						</view>
						<view class="dis disAl">
							<view class="foSi20" style="color: #898989;">服务单</view>
							<view class="foSi25 fowe600 mar-left10" :style="'color: '+theme.main_color+';'" style="margin-right: 15rpx;">{{list.service_order_num}}</view>
							<view style="width: 1rpx;height: 22rpx;background: #BFBFBF;"></view>
						</view>
						<view class="dis disAl">
							<view class="foSi20" style="color: #898989;">收藏量</view>
							<view class="foSi25 fowe600 mar-left10" :style="'color: '+theme.main_color+';'" style="margin-right: 15rpx;">{{list.coll_num}}</view>
							<view style="width: 1rpx;height: 22rpx;background: #BFBFBF;"></view>
						</view>
						<view class="dis disAl">
							<view class="foSi20" style="color: #898989;">浏览量</view>
							<view class="foSi25 fowe600 mar-left10" :style="'color: '+theme.main_color+';'" style="margin-right: 15rpx;">{{list.see_num}}</view>
						</view>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</view>
		</view>
		<view class="wid90 mar borRad30 bacFFF mar-top30" style="padding: 35rpx 0;">
			<view class="wid90 mar dis disAl">
				<view  style="height: 101rpx;width: 20%;">
					<image :src="list.store.cover" class="hei100 borRad50" style="width: 101rpx;"></image>
				</view>
				<view class="dis disAl disJuB" style="width: 80%;">
					<view style="width: 75%;">
						<view class="foSi30 fowe600">{{list.store.store_name}}</view>
						<view class="mar-top10 foSi25 overflowHidden wid100" style="color: #737373;">{{list.store.attestation}}</view>
					</view>
					<view class="dis disAl disJuC foSi20 dianpu" :style="'border: 2rpx solid '+theme.main_color+';color: '+theme.main_color+';'"
						@click="tiaozhuan('/pages/shop/particulars?id='+list.store.id)">查看店铺</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 borRad30 bacFFF" style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 15rpx 0;">
			<view class="wid90 mar">
				<view class="hei60 dis disAl disJuB mar-bott10">
					<view class="fowe600 foSi30">选择项目</view>
					<view class="dis disAl foSi25" @click="tiaozhuan('/pages/shop/shopServe?id='+list.store.id)">
						<view class="mar-right10">查看更多</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</view>
				<block v-for="(item,index) in list.service_list" :key="index">
					<view class="dis">
						<view style="width: 25%;height: 142rpx;">
							<image :src="item.cover_img" class="hei100" style="width: 142rpx;"></image>
						</view>
						<view style="width: 75%;">
							<view class="dis disAl disJuB">
								<view class="foSi30 fowe600">{{item.name}}</view>
								<view class="foSi20" style="color: #878787;">{{item.virtual_sales}}人已预约</view>
							</view>
							<view class="foSi20 webkitLineClamp mar-top10" style="color: #878787;">{{item.subtitle}}</view>
							<view class="mar-top20 dis disAl disJuB">
								<view class="dis disAl">
									<view class="foSi15 coFFF tim1" :style="'background-color: '+theme.seco_color+';'">{{item.duration}}分钟</view>
									<view class="mar-left10">
										<view class="foSi20" style="vertical-align: bottom;color: #FF0000;">
											<span>¥</span>
											<span class="fowe600 foSi30">{{item.price}}</span>
											<span class="foSi15 mar-left10 poRel" style="color: #A6A6A6;">
												<span>¥</span>
												<span class="fowe600 foSi20">{{item.orig_price}}</span>
												<view class="wid100 poAbs" style="height: 1rpx;background-color: #A6A6A6;top: 40%;left: 0;"></view>
											</span>
										</view>
									</view>
								</view>
								<view class="dis disAl disJuC foSi22 coFFF butt2" :style="'background-color: '+theme.main_color+';'"
								@click.stop="tiaozhuan1('/pages/subscribe/subscribe?id='+item.id+'&jishi_id='+list.id+'&name='+list.name)">立即预约</view>
							</view>
						</view>
					</view>
					<view class="hei20"></view>
					<wsj v-if="list.service_list.length == 0" zs='3'></wsj>
				</block>
			</view>
		</view>
		<view class="wid90 mar mar-top30 borRad30 bacFFF" 
			style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);padding: 30rpx 0;">
			<view class="wid90 mar">
				<view class="dis disAl disJuB mar-bott10">
					<view class="fowe600 foSi30">用户好评</view>
					<view class="dis disAl foSi25" @click="tiaozhuan('/pages/technician/comment?tech_id='+id)">
						<view class="mar-right10">查看更多</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
				</view>
				<view style="height: 10rpx;"></view>
				<scroll-view class="mar-top20" style="white-space: nowrap;" scroll-x="true" @scrolltolower="lower">
					<wsj v-if="plList.length == 0" zs='3'></wsj>
					<block v-for="(item,index) in plList" :key="index">
						<view class="borRad20 wid80" style="background-color: #F5F5F5;margin-right: 5%;display: inline-block;">
							<view class="hei20"></view>
							<view class="wid90 mar">
								<view class="dis disAl">
									<view class="hei80" style="width: 20%;">
										<image v-if="item.user.avatar==''" src="../../static/tu3.png" class="borRad50 hei100" style="width: 80rpx;"></image>
										<image v-else :src="url+item.user.avatar" class="borRad50 hei100" style="width: 80rpx;"></image>
									</view>
									<view style="width: 80%;">
										<view class="wid100 dis disAl disJuB">
											<view class="fowe600 foSi28 liH40 overflowHidden" style="width: 60%;">{{item.user.nickname}}</view>
											<view class="foSi20" style="color: #878787;">{{item.createtime}}</view>
										</view>
										<view class="mar-top10 dis disAl">
											<block v-for="(item1, index1) in 5" :key="index1">
												<uni-icons v-if="item.star >= index1+1" type="star-filled" size="30rpx" color="#D81E06"></uni-icons>
												<uni-icons v-if="item.star < index1+1" type="star" size="30rpx" color="#000000"></uni-icons>
											</block>
										</view>
									</view>
								</view>
								<view class="dis mar-top20">
									<view  style="width: 20%;"></view>
									<view class="liH40 webkitLineClamp foSi25" style="width: 80%;height: 80rpx;">{{item.content}}</view>
								</view>
							</view>
							<view style="height: 20rpx;"></view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				id: '',
				currentswiper: 0,
				list: null,
				barList:[],
				plList: [],
				page: 1,
				last_page: 0,
				theme: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this.theme = uni.getStorageSync('theme')
			this.getList()
			this.getPlList()
		},
		methods: {
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			getPlList(){
				var that = this
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/technician/comment_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id//自定义请求头信息
					},
					data: {
						tech_id: that.id,
						page: that.page
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.last_page = result.data.last_page
							if(that.page == 1){
								that.plList = result.data.data
							}else{
								that.plList = that.plList.concat(result.data.data)
							}
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			imageClick(index){
				var that = this
				uni.previewImage({
					urls: that.list.life_img, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			shouchang(){
				var that = this;
				if(!uni.getStorageSync('token')){
					return uni.showToast({title: '请登录',icon: 'error',duration: 2000}) 
				}
				var type = that.list.collect == 1?2:1
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/collect_add',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: that.id,
						type: that.list.collect
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list.collect = type
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
			},
			changeswiper(e){ // 得加上这个方法！！！
				this.currentswiper = e.detail.current
			},
			getList(){
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url+'api/qianyu_smfw/technician/infos',
					method: 'POST',
					header:{
						'site-id':that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
					    let result = res.data
					    if(result.code == 1){
							console.log(result.data)
							that.list = result.data
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			},
			tiaozhuan1(url) {
				var that = this;
				if(!uni.getStorageSync('token')){
					// window.location.href = that.global.url+'addon/qianyu_smfw/h5/#/pages/login/wxLogin'
					// #ifdef H5
					window.location.href = that.global.url+'addon/qianyu_smfw/h5/#/pages/login/wxLogin'
					// #endif
					// #ifdef APP
					uni.navigateTo({
						url: '/pages/login/login'
					})
					// #endif
				}else{
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style>
	.content{
		min-height: 100vh;
		background-color: #F3F1F1;
	}
	.tim1{
		padding: 10rpx;
		border-radius: 5rpx;
	}
	.butt2{
		width: 125rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}
	.richImg {
	    width: 100% !important;
	    height: auto !important;
	}
	.biaoji{
		bottom: 60rpx;
		right: 38rpx;
		width: 64rpx;
		height: 38rpx;
		background-color: #EDECE3;
	}
	.dianpu{
		border-radius: 5rpx;
		width: 110rpx;
		height: 40rpx;
	}
</style>
